<template>
    <div class="contain" v-loading="loading">
        <tz-breadcrumb  :pathArr='[{"name": "场景管理"},{"name": "厨房管理", "url": "/cook"}]'></tz-breadcrumb>
        <div class="section-one-border">
            <el-row :gutter="10" class="section-one" style="margin-left:0px;margin-right:0px">
                <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20" class="left">
                    <span>打印设备管理</span>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                    <div class="grid-content text-right add-btn" @click="edit(1,'','')">
                        <i class="el-icon-plus"></i>添加设备</div>
                </el-col>
            </el-row>
        </div>
        <!-- table -->
        <div class="main-contain">
            <div  class="s-list-title text-center" v-if="noInfo">----暂无打印机列表----</div>
            <div v-if="printList != ''">
                <table class='pay-tb'>
                    <thead>
                        <tr>
                            <th>打印机名称</th>
                            <th>打印机终端号</th>
                            <th>API密钥</th>
                            <th>打印机终端密钥</th>
                            <th> 易联云用户ID</th>
                            <th>打印机状态</th>
                            <th>所属区域</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in printList" :key="item.id">
                            <td>{{item.name}}</td>
                            <td>{{item.mid}}</td>
                            <td>{{item.api}}</td>
                            <td>{{item.token}}</td>
                            <td>{{item.yy_id}}</td>
                            <td>{{item.state == 1?'开启':'关闭'}}</td>
                            <td>{{item.region_name}}</td>
                            <td><a class="delete-btn" @click="edit(2,item.id,index)">编辑</a></td>
                        </tr>
                    </tbody>
                </table>
                <div class="text-center page-border">
                    <div class="page-border-size">每页显示{{size}}条</div>
                <el-pagination v-if="total > size"
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
                :page-size="size"
                :total="total">
                </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog title="打印设备信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="打印机设备" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"  placeholder="请输入打印机设备"></el-input>
                </el-form-item>
                <el-form-item label="打印机终端号" :label-width="formLabelWidth">
                  <el-input v-model="form.mid" autocomplete="off"  placeholder="请输入打印机终端号"></el-input>
                </el-form-item>
                <el-form-item label="API密钥" :label-width="formLabelWidth">
                  <el-input v-model="form.api" autocomplete="off"  placeholder="请输入API密钥"></el-input>
                </el-form-item>
                <el-form-item label="打印机终端密钥" :label-width="formLabelWidth">
                  <el-input v-model="form.token" autocomplete="off"  placeholder="请输入打印机终端密钥"></el-input>
                </el-form-item>
                <el-form-item label="易联云用户ID" :label-width="formLabelWidth">
                  <el-input v-model="form.yy_id" autocomplete="off"  placeholder="请输入易联云用户ID"></el-input>
                </el-form-item>
                <el-form-item label="是否开启" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.state">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="2">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="所属区域" :label-width="formLabelWidth">
                   <!-- <el-select v-model="form.region_type" placeholder="点击选择所属场景">
                    <el-option
                    v-for="item in form.optionsScenario"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                  </el-select> -->
                  <!-- <el-select v-model="form.region_id" placeholder="点击选择所属区域">
                    <el-option
                    v-for="item in form.optionsArea"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                  </el-select> -->
                  <div class="block">
                    <!-- <span class="demonstration">hover 触发子菜单</span> -->
                    <el-cascader
                        expand-trigger="hover"
                        :options="options"
                        v-model="selectedOptions2"
                        @change="handleChange">
                    </el-cascader>
                 </div>
                </el-form-item>
                 
            </el-form>
            <div slot="footer" class="dialog-footer text-center">
                <el-button    v-if="isShowDelete" @click="deletePrint">删除</el-button>
                <el-button type="primary" @click="sureClick">确 定</el-button>
            </div>
        </el-dialog>
        
    </div>
</template>
<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb'

export default {
    data () {
      return {
        page:1,
        size:10,
        total:0,
        loading: false,
        printList:[],
        form: {
          name:"",
          mid:"",
          api:'',
          token:"",
          yy_id:"",
          state:1,
          region_type:"",
        },
        formLabelWidth: '120px',
        dialogFormVisible:false,
        currentId:'',
        isShowDelete: false,
        options: [],
        selectedOptions2: [],
        noInfo:false
      }
    },
    components: {
        'tz-breadcrumb': tzBreadcrumb,
    },
    methods: {
        handleChange(value) {
            console.log(value);
            
        },
        // 获取厨房列表
        getPrintList () {
            let that = this;
            that.loading = true;
            http.get(api.eslinkList, {
                seller_id: localStorage.getItem("seller_id"),
                current_page:that.page,
                perpage:that.size
            }, (res) => {
              console.log(res);
              that.loading = false;
              if(res.data.data == ''){
                  that.noInfo = true;
              } else {
                  that.noInfo = false;
              }
              if(res.code == '10001'){
                that.printList = res.data.data;
                that.total = res.data.total
              } else{
                  that.$message({
                      type:'info',
                      message:res.msg
                  })
              }
            }, () => {
            console.log('网络错误');
            that.loading = false;
            });
        },
        // 页码点击事件
        handleCurrentChange (val) {
            this.page = val;
            this.getPrintList();
        },
        edit(val,id,index) {
            let that = this;
            that.dialogFormVisible = true;
            // val 1为添加，二为编辑
            if(val == 1) {
                
              that.isShowDelete = false;
              that.form.name = '';
              that.form.mid = '';
              that.form.api = '';
              that.form.token = '';
              that.form.yy_id = '';
              that.form.state = 1;
              that.form.region_type = '';
              that.selectedOptions2 = [];
            } else {
              that.isShowDelete = true;
              that.currentId = id;
              console.log(that.printList[index]);
              that.form = that.printList[index];
              var arr = [];
              arr.push(that.printList[index].region_type);
              arr.push(that.printList[index].region_id);
              that.selectedOptions2 = arr; 
            } 
        },
        deletePrint(){
            let that = this;
            that.$confirm('确认删除该设备吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
                }).then(() => {
                    that.loading = true;
                    // 添加餐厅接口
                    http.get(api.eslinkDel, {
                        seller_id: localStorage.getItem("seller_id"),
                        id:that.currentId
                    }, (res) => {
                    console.log(res);
                    //   关闭弹框
                    that.dialogFormVisible = false;
                    that.loading = false;
                    if(res.code == '10001') {
                        this.$message({
                            type: 'success',
                            message: '删除厨房成功!'
                        });
                        //   重新获取列表
                        that.getPrintList();
                    }else {
                        this.$message({
                            type: 'info',
                            message: res.msg
                        });
                    }
                    
                    }, () => {
                    that.loading = false;
                    console.log('网络错误');
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                    that.loading = false;
            
            }); 


        },
        sureClick(){
          let that = this;
          console.log(that.form.name);
          if(that.form.name == ''){
              that.$message({
                type: 'info',
                message: '请输入打印机设备名称'
              });
              return false;
          } else if(that.form.mid == ''){
              that.$message({
                type: 'info',
                message: '请输入打印机终端号'
              });
              return false;
          } else if(that.form.api == ''){
              that.$message({
                type: 'info',
                message: '请输入API密钥'
              });
              return false;
          } else if(that.form.token == ''){
              that.$message({
                type: 'info',
                message: '请输入打印机终端密钥'
              });
              return false;
          } else if(that.form.yy_id == ''){
              that.$message({
                type: 'info',
                message: '请选择易联云用户ID'
              });
              return false;
          }
        //   else if(that.form.region_type == ''){
        //       that.$message({
        //         type: 'info',
        //         message: '请选择所属区域'
        //       });
        //       return false;
        //   }
          //   that.isShowDelete false 为添加餐厅，true为编辑餐厅
          if(that.isShowDelete == false) {
            that.$confirm('确认添加吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
                }).then(() => {
                    that.loading = true;
                    // 添加餐厅接口
                    http.get(api.eslinkAdd, {
                        seller_id: localStorage.getItem("seller_id"),
                        dyj_title:'您有一个新的订单',
                        type:2,
                        name: that.form.name,
                        mid: that.form.mid,
                        api: that.form.api,
                        state: that.form.state,
                        token: that.form.token,
                        yy_id:that.form.yy_id,
                        region_type:that.selectedOptions2[0],
                        region_id:that.selectedOptions2[1]
                    }, (res) => {
                    console.log(res);
                    //   关闭弹框
                    that.dialogFormVisible = false;
                    that.loading = false;
                    if(res.code == '10001') {
                        this.$message({
                            type: 'success',
                            message: '添加打印设备成功!'
                        });
                        //   重新获取列表
                        that.getPrintList();
                    }else {
                        this.$message({
                            type: 'info',
                            message: res.msg
                        });
                    }
                    
                    }, () => {
                    that.loading = false;
                    console.log('网络错误');
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加打印设备'
                    });
                    that.loading = false;
            
            }); 
            
            
          } else {
            that.$confirm('确认修改吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
                }).then(() => {
                    that.loading = true;
                    // 编辑接口
                    http.get(api.eslinkEdit, {
                        id: that.currentId,
                        seller_id: localStorage.getItem("seller_id"),
                        dyj_title:'您有一个新的订单',
                        type:2,
                        name: that.form.name,
                        mid: that.form.mid,
                        api: that.form.api,
                        state: that.form.state,
                        token: that.form.token,
                        yy_id:that.form.yy_id,
                        region_type:that.selectedOptions2[0],// that.form.region_type
                        region_id:that.selectedOptions2[1]// that.form.region_id
                    }, (res) => {
                    console.log(res);
                    //   关闭弹框
                    that.dialogFormVisible = false;
                    that.loading = false;
                    if(res.code == '10001') {
                        this.$message({
                            type: 'success',
                            message: '修改打印设备信息成功!'
                        });
                        //   重新获取列表
                        that.getPrintList();
                    }else {
                        this.$message({
                            type: 'info',
                            message: res.msg
                        });
                    }
                    
                    }, () => {
                    that.loading = false;
                    console.log('网络错误');
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改打印设备'
                    });
                    that.loading = false;
            
            }); 

          }

        },
        // 获取区域列表
        getRegionList(){
            let that = this;
            http.post(api.eslinkRegionList, {
                seller_id: localStorage.getItem("seller_id")
            }, (res) => {
                console.log(res);
                that.options = res.data;
            }, () => {
            console.log('网络错误');
            });
        }
    },
    mounted ()  {
      console.log(5555);
      var that = this;
      // 餐厅列表接口获取
      that.getPrintList();
      // 获取区域列表
      that.getRegionList();
  
    },
}
</script>
<style scoped>
.section-one {
    background: #fff;
    line-height: 50px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #333;
    font-size: 16px;
    margin-top: 10px;   
}
.section-one,.main-contain{
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -o-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -ms-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    margin-top:10px;
}
.section-one .left{
    font-size:16px;
    font-weight: bold;
}
.add-btn{
    width: 90px;
    float: right;
    color: #FF6F2E;
    font-size: 16px;
    margin-right: 10px;
    cursor: pointer;
}
.main-contain {
    padding:20px 20px 50px 20px;
    box-sizing: border-box

}
.pay-tb {
    border-collapse: collapse;
    width: 100%;
}
.pay-tb th {
    text-align: left;
    color: #333;
    font-size:16px;
}
.pay-tb td{
   color: #666; 
   font-size:14px;
}
.pay-tb tr{
    border-bottom:1px solid #e7e7e7;
}
.pay-tb td, .pay-tb th {
    height: 40px;
    /* border: 1px solid violet; */
}
.delete-btn{
    color:#586EA1;
    cursor: pointer;
}
.page-border{
    margin-top:40px;
    position: relative;
    padding-left:100px;
    box-sizing: border-box
}
.page-border-size{
    position: absolute;
    left:0px;
    top:0px;
    line-height:30px;
    font-size:14px;
    color:#666;
    width:90px;
}
.s-list-title {
  color:#999;
  margin-bottom:5px;
  font-size:14px;
  width:100%
}
</style>
